'use strict';
/*
*  醇典厨房
* */
import React,{Component} from 'react';
import {
    View,
    Text,
    Image,
    TouchableOpacity,
    StyleSheet,
    ScrollView
} from 'react-native';
import Header from '../common/header';
import Util from '../common/util';
import * as URLconstant from '../constant/URLconstant'
import GoodsInfo from '../goods/goodsIndex';
export default class homeCateGoods extends Component{
    // 构造
      constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            goodsData:null
        };
      }

    componentDidMount() {
        this.getGoods()
    }

      getGoods(){
          let url = URLconstant.GET_CATE_GOODS
          let datakey=[]
          datakey['user_id']=1
          datakey['cate_id']=this.props.cate_id
          Util.get(url,datakey,this.getGoodsSuc.bind(this),this.errorCallback.bind(this))
      }

    getGoodsSuc(datas){
          let goodsData = []
        if(datas.status==0){
            goodsData=datas.data
        }
        this.setState({
            goodsData:goodsData
        })
    }
    errorCallback(err){

    }

    toGoods(goods_id){
        this.props.navigator.push({
            component:GoodsInfo,
            passProps:{
                goods_id:goods_id
            }
        })
    }

    showGoods(){
          let goodsData = this.state.goodsData
        return(
            <View>
                {
                    goodsData.map((item,index)=>{
                        return(
                            <View key={index} style={styles.goods_cate}>
                                <Image
                                    source={{uri:item.ad_picture}}
                                    resizeMode={'cover'}
                                    style={{width:Util.size.width,height:Util.size.width*0.53}}
                                />
                                <ScrollView horizontal={true} style={{paddingVertical:10,marginHorizontal:10}}>
                                    {
                                        item.goods_list.map((goods,index2)=>{
                                            return(
                                                <TouchableOpacity onPress={()=>this.toGoods(goods.goods_id)} style={styles.goods_item} key={index2}>
                                                    <Image
                                                        source={{uri:goods.default_image}}
                                                        resizeMode={'cover'}
                                                        style={{width:120,height:120}}
                                                    />
                                                    <View style={{padding:5}}>
                                                        <Text style={{fontSize:12,color:"#000"}} numberOfLines={1}>{goods.goods_name}</Text>
                                                        <Text style={{fontSize:16,color:"#f00",marginTop:5}}>¥{goods.price}</Text>
                                                        <View style={styles.buy_btn}>
                                                            <Text style={{fontSize:12,color:"#fff"}}>立即购买</Text>
                                                        </View>
                                                    </View>
                                                </TouchableOpacity>
                                            )
                                        })
                                    }
                                </ScrollView>
                            </View>
                        )
                    })
                }
            </View>
        )
    }

      render(){
          return(
              <View style={{flex:1}}>
                  <Header navigator={this.props.navigator} initObj={{ title: '醇典厨房',id:2}}/>
                  {
                      this.state.goodsData==null?
                          <View style={{flex:1}}>
                              {Util.loading()}
                          </View>:
                          <View style={{flex:1}}>
                              {
                                  this.state.goodsData.length==0?
                                      <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
                                          <Text>改分类没有商品数据</Text>
                                      </View>
                                      :
                                      <ScrollView style={{flex:1}}>
                                          {this.showGoods()}
                                      </ScrollView>
                              }
                          </View>
                  }
              </View>
          )
      }
}
var styles = StyleSheet.create({
    goods_cate:{
        marginBottom:10  
    },
    goods_item:{
        width:120,
        marginRight:10
    },
    buy_btn:{
        width:60,
        height:20,
        alignItems:'center',
        justifyContent:'center',
        backgroundColor:"#f00",
        borderRadius:5,
        marginTop:5
    }
})